<template>
    <div class="login">
        <div class="bg"></div>
        <div class="box">
            <div class="left">
                <img src="~asim/login_bg.png">
            </div>
            <div class="right">
                <img src="~asim/logo.png" class="logo">
                <el-form ref="form" :model="form" :rules="rules" class="form" label-width="80px">
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="form.account" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password" maxlength="16" show-password>
                        <el-input type="password" v-model="form.password"  />
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <div class="code">
                            <el-input v-model="form.code" style="width: 180px;" />
                            <span @click="createCode()">
                                <Sidentify :identifyCode="identifyCode" />
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-radio-group v-model="form.role">
                            <el-radio :label="0">管理员</el-radio>
                            <el-radio :label="1">指导教师</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">登录</el-button>
                        <el-button @click="$refs.form.resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Sidentify from "co/Sidentify";
import tool from "ut/tool";
import { mapActions } from 'vuex';
export default {
    name: 'WebLogin',
    components: { Sidentify },
    data() {
        return {
            form: {
                account: '',    // 账号
                password: '',   // 密码
                code: '',       // 验证码
                role: 0
            },
            identifyCode: '',   // 随机验证码
            rules: {
                account: { required: true, message: '请输入账号' },
                password: { required: true, message: '请输入密码' },
                code: { required: true, message: '请输入验证码' },
            }
        };
    },
    methods: {
        ...mapActions('User',['login']),
        createCode() {
            let code = '';
            for(let i = 0; i < 4; i++) code += tool.random();
            this.identifyCode = code;
        },
        submit() {
            this.$refs.form.validate((valid) => {
				if (valid) {
					if (this.form.code === this.identifyCode) {
						delete this.form.code;
                        this.login(this.form);
					} else {
                        tool.notif('error','错误','验证码错误');
						this.createCode()
					}
				}
			})
        },
    },
    mounted() {
        this.createCode();
    },
};
</script>

<style lang="less" scoped>
    @import "asle/index.less";
    .login {
        .size();
        .pos_r();
        .bg {
            .size();
            .pos_a();
            .z_in(0);
            background: linear-gradient(to right bottom, #6164ff, rgb(0, 174, 255));
        }
        .box {
            .size(800px,440px);
            .pos_a();
            .z_in(1);
            .pos_lt(50%,50%);
            .tran_t();
            .bor_r(10px);
            .over();
            .bg(white);
            .df();
            .left {
                .size(360px,100%);
                .bor_ri(1px,solid,#eee);
                img {
                    .size(300px);
                    .marg(50px,30px);
                }
            }
            .right {
                .size(440px,100%);
                .df();
                .f_fd();
                .logo {
                    .w(220px);
                    .marg(30px,auto,30px);
                }
                .form {
                    .w(400px);
                    .code {
                        .size(320px,40px);
                        .df();
                        .f_jc(space-between);
                    }
                }
            }
        }
    }
</style>